page-table-list {

}
.table-item h1 {
  font-size:1em;
  margin:$spacing 0 !important;
}
.table-item div {
  text-align:center;
  color:color($colors, white);
  padding:$spacing 0;
  font-size:0.8em;
}
.table-item div.fill-0 {
  background-color:color($colors, dark);
}
.table-item div.fill-10 {
  background:linear-gradient(to right, color($colors, pink) 10%, color($colors, dark) 10%, color($colors, dark) 100%);
}
.table-item div.fill-20 {
  background:linear-gradient(to right, color($colors, pink) 20%, color($colors, dark) 20%, color($colors, dark) 100%);
}
.table-item div.fill-30 {
  background:linear-gradient(to right, color($colors, pink) 30%, color($colors, dark) 30%, color($colors, dark) 100%);
}
.table-item div.fill-40 {
  background:linear-gradient(to right, color($colors, pink) 40%, color($colors, dark) 40%, color($colors, dark) 100%);
}
.table-item div.fill-50 {
  background:linear-gradient(to right, color($colors, pink) 50%, color($colors, dark) 50%, color($colors, dark) 100%);
}
.table-item div.fill-60 {
  background:linear-gradient(to right, color($colors, pink) 60%, color($colors, dark) 60%, color($colors, dark) 100%);
}
.table-item div.fill-70 {
  background:linear-gradient(to right, color($colors, pink) 70%, color($colors, dark) 70%, color($colors, dark) 100%);
}
.table-item div.fill-80 {
  background:linear-gradient(to right, color($colors, pink) 80%, color($colors, dark) 80%, color($colors, dark) 100%);
}
.table-item div.fill-90 {
  background:linear-gradient(to right, color($colors, pink) 90%, color($colors, dark) 90%, color($colors, dark) 100%);
}
.table-item div.fill-100 {
  background-color:color($colors, pink);
}
.table-detail {
  background-color:color($colors, white);
  border-top:1px solid #eee;
  border-bottom:1px solid #eee;
  -webkit-animation:fadeIn 0.5s linear forwards;
  animation:fadeIn 0.5s linear forwards;
  margin-top:$spacing;
  padding:0;
}
.table-detail:after, .table-detail:before {
	bottom:100%;
	border:solid transparent;
	content:' ';
	height:0;
	width:0;
	position:absolute;
}
.table-detail.arrow-0:after, .table-detail.arrow-0:before {
	left:13%;
}
.table-detail.arrow-1:after, .table-detail.arrow-1:before {
	left:38%;
}
.table-detail.arrow-2:after, .table-detail.arrow-2:before {
	left:63%;
}
.table-detail.arrow-3:after, .table-detail.arrow-3:before {
	left:88%;
}
.table-detail:after {
	border-color:rgba(255, 255, 255, 0);
	border-bottom-color:#fff;
	border-width:10px;
	margin-left:-10px;
}
.table-detail:before {
	border-color:rgba(238, 238, 238, 0);
	border-bottom-color:#ddd;
	border-width:11px;
	margin-left:-11px;
}
.table-detail > .table-order {
}
.table-detail > .table-order:not(:last-child) {
  border-bottom:1px solid #ddd;
}
.table-order-header {
  padding:$spacing;
  border-bottom:1px solid #eee;
  display:flex;
}
.table-order-header > *:not(:last-child) {
  margin-right:$spacing;
}
.table-order-header > i {
  flex-grow:1;
  font-size:1.6em;
  padding:$spacing;
}
.table-order-header > .table-order-seat {
  flex-grow:1;
  font-weight:500;
}
.table-order-header > .table-order-time {
  flex-grow:4;
  font-weight:500;
}
.table-order-header > .table-order-price {
  flex-grow:2;
  text-align:right;
}
.table-order-footer {
  padding:$spacing;
  display:flex;
}
.table-order-footer > *:not(:last-child) {
  margin-right:$spacing;
}
.table-order-footer > i {
  flex-grow:4;
  font-size:1.6em;
  text-align:right;
}
.table-order-footer > .table-order-seat-change {
  flex-grow:4;
}
.table-order-footer > .table-order-seat-change > button {
  font-size:1.2em;
  margin:0;
  height:1.6em;
  padding:0 $spacing * 2;
}
.table-order-footer > .table-order-seat-change > .table-order-occupied {
  line-height:1.6em;
  width:30px;
  text-align:center;
  display:inline-block;
}
.table-order-footer > .table-order-settings {
  flex-grow:3;
  text-align:right;
}
.table-order-footer > .table-order-settings > button {
  font-size:1.2em;
  margin:0;
  height:1.6em;
  padding:0 $spacing * 2;
}
.navbar-icon{
    width: 22px;
    height: 22px;
}
